<template>
  <div>
    <el-row class="marT" :gutter="10">
      <el-col :class="{'marT': index > 1}" :xs="24" :sm="24" :lg="12" v-for="(item, index) in list" :key="'v'+index">
        <v-charts
          headerTitle="评分趋势"
          type="line"
          :data="trendList[item]"
          :settings="settings"
          :data-empty="empty"
          :loading="loading"></v-charts>
          <el-input
            type="textarea"                        
            placeholder="请输入分析/建议"
            v-model="comment.groupComment.indicator_trend_comments[index]"
            style="padding: 10px">
          </el-input>
      </el-col>
    </el-row>

    <div id="cursor" class="dataTable marT bgColor">
      <div class="ibox-title pad">KPI列表</div>
        <el-row style="padding: 20px">
            <el-col :xs="24" :sm="24" :lg="24">
                <el-table
                    :header-cell-style="{background:'#eef1f6'}"
                    v-loading="tableLoading"
                    :data="tableData.slice((tableCurrent-1)*tableSize, tableCurrent*tableSize)"                            
                    style="width: 100%">           
                    <el-table-column 
                      fixed
                      label="月度统计"
                      align="center"
                      prop="examine_month"
                      width="80">
                    </el-table-column>

                    <el-table-column align="center" label="客户满意度管理-客户投诉">                        
                      <el-table-column
                        label="客户流程覆盖率"
                        align="center"
                        width="60"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.complaint_flow_cover_rate" :class="{'noReach': !scope.row.complaint_flow_cover_rate.is_reached, 'reach': scope.row.complaint_flow_cover_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'complaint_flow_cover_rate')">{{cellFilter(scope.row.complaint_flow_cover_rate.actual_value, 'percent')}}</div>
                          <div v-else>—</div>
                        </template>
                      </el-table-column>

                      <el-table-column
                        label="客户流程符合度"
                        align="center"
                        width="60"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.complaint_flow_conformity" :class="{'noReach': !scope.row.complaint_flow_conformity.is_reached, 'reach': scope.row.complaint_flow_conformity.is_reached}" @click="cellClick(scope.row.examine_month, 'complaint_flow_conformity')">{{cellFilter(scope.row.complaint_flow_conformity.actual_value, 'percent')}}</div>
                          <div v-else>—</div>
                        </template>
                      </el-table-column>

                      <el-table-column
                        label="客户投诉纠正预防措施关闭率"
                        align="center"
                        width="60"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.complaint_rectify_closed_rate" :class="{'noReach': !scope.row.complaint_rectify_closed_rate.is_reached, 'reach': scope.row.complaint_rectify_closed_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'complaint_rectify_closed_rate')">{{cellFilter(scope.row.complaint_rectify_closed_rate.actual_value, 'percent')}}</div>
                          <div v-else>—</div>
                        </template>
                      </el-table-column>
                    </el-table-column>

                    <el-table-column align="center" label="阶段点质量评审">
                      <el-table-column
                        label="AB类项目阶段点流程覆盖率"
                        align="center"
                        width="60"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.period_flow_cover_rate" :class="{'noReach': !scope.row.period_flow_cover_rate.is_reached, 'reach': scope.row.period_flow_cover_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'period_flow_cover_rate')">{{cellFilter(scope.row.period_flow_cover_rate.actual_value, 'percent')}}</div>
                          <div v-else>—</div>
                        </template>
                      </el-table-column>

                      <el-table-column
                        label="流程符合度"
                        align="center"
                        width="60"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.period_flow_conformity" :class="{'noReach': !scope.row.period_flow_conformity.is_reached, 'reach': scope.row.period_flow_conformity.is_reached}" @click="cellClick(scope.row.examine_month, 'period_flow_conformity')">{{cellFilter(scope.row.period_flow_conformity.actual_value, 'percent')}}</div>
                          <div v-else>—</div>
                        </template>
                      </el-table-column>

                      <el-table-column
                        label="评审计划偏差率"
                        align="center"
                        width="60"
                        >
                        <el-table-column
                          label="TG4"
                          align="center"
                          width="60"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.period_plan_deviation_rate_tg4" :class="{'noReach': !scope.row.period_plan_deviation_rate_tg4.is_reached, 'reach': scope.row.period_plan_deviation_rate_tg4.is_reached}" @click="cellClick(scope.row.examine_month, 'period_plan_deviation_rate_tg4')">{{cellFilter(scope.row.period_plan_deviation_rate_tg4.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          label="TG5"
                          align="center"
                          width="60"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.period_plan_deviation_rate_tg5" :class="{'noReach': !scope.row.period_plan_deviation_rate_tg5.is_reached, 'reach': scope.row.period_plan_deviation_rate_tg5.is_reached}" @click="cellClick(scope.row.examine_month, 'period_plan_deviation_rate_tg5')">{{cellFilter(scope.row.period_plan_deviation_rate_tg5.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                      </el-table-column>

                      <el-table-column
                        label="评审一次通过率"
                        align="center"
                        width="60"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.period_review_pass_rate" :class="{'noReach': !scope.row.period_review_pass_rate.is_reached, 'reach': scope.row.period_review_pass_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'period_review_pass_rate')">{{cellFilter(scope.row.period_review_pass_rate.actual_value, 'percent')}}</div>
                          <div v-else>—</div>
                        </template>
                      </el-table-column>

                      <el-table-column
                        label="评审发现问题关闭率"
                        align="center"
                        width="60"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.period_issue_closed_rate" :class="{'noReach': !scope.row.period_issue_closed_rate.is_reached, 'reach': scope.row.period_issue_closed_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'period_issue_closed_rate')">{{cellFilter(scope.row.period_issue_closed_rate.actual_value, 'percent')}}</div>
                          <div v-else>—</div>
                        </template>
                      </el-table-column>
                    </el-table-column>

                    <el-table-column v-if="!groupStatus" align="center" label="bug处理">
                      <el-table-column
                        label="AB类项目bug处理流程覆盖率"
                        align="center"
                        width="60"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.bug_flow_cover_rate" :class="{'noReach': !scope.row.bug_flow_cover_rate.is_reached, 'reach': scope.row.bug_flow_cover_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_flow_cover_rate')">{{cellFilter(scope.row.bug_flow_cover_rate.actual_value, 'percent')}}</div>
                          <div v-else>—</div>
                        </template>
                      </el-table-column>

                      <el-table-column
                        label="流程符合度"
                        align="center"
                        width="60"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.bug_flow_conformity" :class="{'noReach': !scope.row.bug_flow_conformity.is_reached, 'reach': scope.row.bug_flow_conformity.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_flow_conformity')">{{cellFilter(scope.row.bug_flow_conformity.actual_value, 'percent')}}</div>
                          <div v-else>—</div>
                        </template>
                      </el-table-column>

                      <el-table-column
                        label="无效bug比例"
                        align="center"                        
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.invalid_bug_rate" :class="{'noReach': !scope.row.invalid_bug_rate.is_reached, 'reach': scope.row.invalid_bug_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'invalid_bug_rate')">{{cellFilter(scope.row.invalid_bug_rate.actual_value, 'percent')}}</div>
                          <div v-else>—</div>
                        </template>
                      </el-table-column>
                    </el-table-column>

                    <el-table-column v-else align="center" label="bug处理">
                      <el-table-column 
                        label="Bug处理流程符合度(%)"
                        align="center"
                        width="60"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.bug_flow_conformity_for_customer" :class="{'noReach': !scope.row.bug_flow_conformity_for_customer.is_reached, 'reach': scope.row.bug_flow_conformity_for_customer.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_flow_conformity_for_customer')">{{cellFilter(scope.row.bug_flow_conformity_for_customer.actual_value, 'percent')}}</div>
                          <div v-else>—</div>
                        </template>
                      </el-table-column>                               

                      <el-table-column 
                        label="无效Bug比例(%)"
                        align="center"
                        width="60"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.invalid_bug_rate_for_customer" :class="{'noReach': !scope.row.invalid_bug_rate_for_customer.is_reached, 'reach': scope.row.invalid_bug_rate_for_customer.is_reached}" @click="cellClick(scope.row.examine_month, 'invalid_bug_rate_for_customer')">{{cellFilter(scope.row.invalid_bug_rate_for_customer.actual_value, 'percent')}}</div>
                          <div v-else>—</div>
                        </template>
                      </el-table-column>
                    </el-table-column>

                    <el-table-column align="center" label="发布流程">
                      <el-table-column
                        label="Release流程覆盖率"
                        align="center"
                        width="60"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.release_flow_cover_rate" :class="{'noReach': !scope.row.release_flow_cover_rate.is_reached, 'reach': scope.row.release_flow_cover_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'release_flow_cover_rate')">{{cellFilter(scope.row.release_flow_cover_rate.actual_value, 'percent')}}</div>
                          <div v-else>—</div>
                        </template>
                      </el-table-column>

                      <el-table-column
                        v-if="!groupStatus"
                        label="流程符合度"
                        align="center"
                        width="60"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.release_flow_conformity" :class="{'noReach': !scope.row.release_flow_conformity.is_reached, 'reach': scope.row.release_flow_conformity.is_reached}" @click="cellClick(scope.row.examine_month, 'release_flow_conformity')">{{cellFilter(scope.row.release_flow_conformity.actual_value, 'percent')}}</div>
                          <div v-else>—</div>
                        </template>
                      </el-table-column>

                      <el-table-column
                        v-else
                        label="Release流程符合度"
                        align="center"
                        width="80"
                        >
                        <template slot-scope="scope">
                          <div v-if="scope.row.release_flow_conformity_for_customer" :class="{'noReach': !scope.row.release_flow_conformity_for_customer.is_reached, 'reach': scope.row.release_flow_conformity_for_customer.is_reached}" @click="cellClick(scope.row.examine_month, 'release_flow_conformity_for_customer')">{{cellFilter(scope.row.release_flow_conformity_for_customer.actual_value, 'percent')}}</div>
                          <div v-else>—</div>
                        </template>
                      </el-table-column>
                    </el-table-column>
                      
                    <el-table-column align="center" label="加减分项">
                      <el-table-column label="项目人员替换率" align="center">
                        <el-table-column 
                          v-if="targetList.labor_replacement_ratio"                         
                          align="center" 
                          :label="operatorList[targetList.labor_replacement_ratio.operator]+targetList.labor_replacement_ratio.indicator+'%'"
                          width="80">
                          <template slot-scope="scope">
                            <div v-if="scope.row.labor_replacement_ratio" :class="{'noReach': !scope.row.labor_replacement_ratio.is_reached, 'reach': scope.row.labor_replacement_ratio.is_reached}" @click="cellClick(scope.row.examine_month, 'labor_replacement_ratio')">{{cellFilter(scope.row.labor_replacement_ratio.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                      </el-table-column>

                      <el-table-column label="客户投诉次数(次)" align="center">
                        <el-table-column 
                          v-if="targetList.complaint_count"
                          :label="operatorList[targetList.complaint_count.operator]+targetList.complaint_count.indicator+'次'"
                          align="center"                        
                          width="80">
                          <template slot-scope="scope">
                            <div v-if="scope.row.complaint_count" :class="{'noReach': !scope.row.complaint_count.is_reached, 'reach': scope.row.complaint_count.is_reached}" @click="cellClick(scope.row.examine_month, 'complaint_count')">{{cellFilter(scope.row.complaint_count.actual_value, 'cup')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                      </el-table-column>

                      <el-table-column label="因评审原因导致客户投诉次数(次)" align="center">
                        <el-table-column
                          v-if="targetList.period_by_complaint_count"              
                          :label="operatorList[targetList.period_by_complaint_count.operator]+targetList.period_by_complaint_count.indicator+'次' || ''"
                          align="center"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.period_by_complaint_count" :class="{'noReach': !scope.row.period_by_complaint_count.is_reached, 'reach': scope.row.period_by_complaint_count.is_reached}" @click="cellClick(scope.row.examine_month, 'period_by_complaint_count')">{{cellFilter(scope.row.period_by_complaint_count.actual_value, 'cup')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                      </el-table-column>

                      <el-table-column width="70" align="center" label="Bug超期率(%)">
                        <el-table-column
                          v-if="targetList.bug_overtime_rate" 
                          :label="operatorList[targetList.bug_overtime_rate.operator]+targetList.bug_overtime_rate.indicator+'%'"
                          align="center"
                          width="70">
                          <template slot-scope="scope">
                            <div v-if="scope.row.bug_overtime_rate" :class="{'noReach': !scope.row.bug_overtime_rate.is_reached, 'reach': scope.row.bug_overtime_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_overtime_rate')">{{cellFilter(scope.row.bug_overtime_rate.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                      </el-table-column>

                      <el-table-column width="70" align="center" label="Bug comments填写规范度(%)">
                        <el-table-column 
                          v-if="targetList.bug_comments" 
                          :label="operatorList[targetList.bug_comments.operator]+targetList.bug_comments.indicator+'%'"
                          align="center"
                          width="70">
                          <template slot-scope="scope">
                            <div v-if="scope.row.bug_comments" :class="{'noReach': !scope.row.bug_comments.is_reached, 'reach': scope.row.bug_comments.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_comments')">{{cellFilter(scope.row.bug_comments.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                      </el-table-column>

                      <el-table-column width="70" label="bug degrade率" align="center">
                        <el-table-column 
                          v-if="targetList.bug_degrade_rate"
                          :label="operatorList[targetList.bug_degrade_rate.operator]+targetList.bug_degrade_rate.indicator+'%'"
                          align="center"                        
                          width="70">
                          <template slot-scope="scope">
                            <div v-if="scope.row.bug_degrade_rate" :class="{'noReach': !scope.row.bug_degrade_rate.is_reached, 'reach': scope.row.bug_degrade_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_degrade_rate')">{{cellFilter(scope.row.bug_degrade_rate.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                      </el-table-column>

                      <el-table-column width="70" label="bug reopen率" align="center">
                        <el-table-column 
                          v-if="targetList.bug_reopen_rate"
                          :label="operatorList[targetList.bug_reopen_rate.operator]+targetList.bug_reopen_rate.indicator+'%'"
                          align="center"
                          prop="bug_reopen_rate"
                          width="70"
                          >
                          <template slot-scope="scope">
                            <div v-if="scope.row.bug_reopen_rate" :class="{'noReach': !scope.row.bug_reopen_rate.is_reached, 'reach': scope.row.bug_reopen_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_reopen_rate')">{{cellFilter(scope.row.bug_reopen_rate.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                      </el-table-column>

                      <el-table-column width="70" label="bug逃逸率" align="center">
                        <el-table-column 
                          v-if="targetList.bug_escape_rate"
                          :label="operatorList[targetList.bug_escape_rate.operator]+targetList.bug_escape_rate.indicator+'%'"
                          align="center"                            
                          width="70">
                          <template slot-scope="scope">
                            <div v-if="scope.row.bug_escape_rate" :class="{'noReach': !scope.row.bug_escape_rate.is_reached, 'reach': scope.row.bug_escape_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'bug_escape_rate')">{{cellFilter(scope.row.bug_escape_rate.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                      </el-table-column>

                      <el-table-column width="70" label="无效版本比例" align="center">
                        <el-table-column
                          v-if="targetList.invalid_version_rate" 
                          :label="operatorList[targetList.invalid_version_rate.operator]+targetList.invalid_version_rate.indicator+'%'"
                          align="center"                  
                          width="70">
                          <template slot-scope="scope">
                            <div v-if="scope.row.invalid_version_rate" :class="{'noReach': !scope.row.invalid_version_rate.is_reached, 'reach': scope.row.invalid_version_rate.is_reached}" @click="cellClick(scope.row.examine_month, 'invalid_version_rate')">{{cellFilter(scope.row.invalid_version_rate.actual_value, 'percent')}}</div>
                            <div v-else>—</div>
                          </template>
                        </el-table-column>
                      </el-table-column>
                    </el-table-column>               
                </el-table>
                <el-pagination class="marT"
                  v-show="tableTotal > 10"
                  :page-size="tableSize"
                  background                              
                  @size-change="tableSizeChange"
                  @current-change="tableCurrentChange"
                  :current-page="tableCurrent"                               
                  layout="prev, pager, next"
                  style="text-align: center"
                  :total="tableTotal">
                </el-pagination>
            </el-col>
        </el-row>
        <el-input
          type="textarea"                        
          placeholder="请输入分析/建议"
          v-model="comment.groupComment.indicator_table_comments"
          style="padding: 10px">
        </el-input>
    </div>
  </div>
</template>

<script>
  import VCharts from '@/components/charts/index'
  import { mapState } from 'vuex'

  export default {
    inject: ['comment'],
    name: 'groupValue',
    components: {
      VCharts
    },
    props: {
      groupValueTrend: {
        type: Array,
        default: () => {
          return []
        }
      },
      targetList: {
        type: Object,
        default: () => {
          return {}
        }
      },
      tableData: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    computed: {
      list() {
        return Object.keys(this.trendList)
      },
      ...mapState({
        chooseList: state => state.chooseList
      }),
      groupStatus() {
        if (this.chooseList.groupId === 261 || this.chooseList.groupId === 263) {
          return true
        } else {
          return false
        }
      }
    },
    data() {
      return {
        loading: false,
        empty: false,
        tableLoading: false,
        operatorList: ['>', '<', '>=', "<=", '='],
        tableCurrent: 1,
        tableSize: 10,
        tableTotal: 0,
        trendList: {
          periodData: {
            columns: ['examine_month', 'period_flow_conformity', 'period_flow_cover_rate', 'period_issue_closed_rate', 'period_plan_deviation_rate', 'period_review_pass_rate'],
            rows: []
          },
          defectData: {
            columns: ['examine_month', 'bug_flow_conformity', 'bug_flow_cover_rate', 'invalid_bug_rate'],
            rows: []
          },
          complaintData: {
            columns: ['examine_month', 'complaint_count', 'complaint_flow_conformity', 'complaint_flow_cover_rate', 'complaint_rectify_closed_rate'],
            rows: []
          },
          releaseData: {
            columns: ['examine_month', 'release_flow_conformity', 'release_flow_cover_rate'],
            rows: []
          },
        },
        settings: {
          labelMap: {
            period_flow_conformity: '流程符合度(%)',
            period_flow_cover_rate: 'AB类项目流程覆盖率(%)',
            period_issue_closed_rate: '评审发现问题关闭率(%)',
            period_plan_deviation_rate: '评审计划偏差率(%)',
            period_review_pass_rate: '评审一次通过率(%)',
            complaint_count: '客户投诉次数(次)',
            complaint_flow_conformity: '流程符合度(%)',
            complaint_flow_cover_rate: '客诉流程覆盖率(%)',
            complaint_rectify_closed_rate: '客诉纠正预防措施关闭率(%)',
            bug_flow_conformity: '流程符合度(%)',
            bug_flow_cover_rate: 'AB类项目流程覆盖率(%)',
            invalid_bug_rate: '无效bug比例(%)',
            release_flow_conformity: '流程符合度(%)',
            release_flow_cover_rate: '流程覆盖率(%)'
          }
        }
      }
    },
    methods: {
      tableCurrentChange(val) {
        this.tableCurrent = val
      },
      tableSizeChange(val) {
        this.tableCurrent = val
      },
      cellFilter(val, type) {
        let value
        if(type == 'point') {
          val != undefined ? value = `${Number(val).toFixed(2)}分` : value = '—'
        } else if(type == "percent") {
          val != undefined ? value = `${Number(val).toFixed(2)}%` : value = '—'
        } else if(type == "cup") {
          val != undefined ? value = `${val}次` : value = '—'
        } else {
          val != undefined ? value = `${val}` : value = '—'
        }
        return value
      }
    },
    watch: {
      groupValueTrend: {
        handler: function() {

          if(this.groupValueTrend.length) {

          }
          this.list.forEach((item) => {
            this.trendList[item].rows = this.groupValueTrend
          })
        },
        deep: true,
        immediate: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../assets/common/common.scss';
  .bgColor{
    background: #fff;
  }
  .marT{
    margin-top: 20px;
  }
  .pad{
    padding: 18px 20px;
    border-bottom: 1px solid #e6ebf5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;       
  }
  /deep/ .reach{
    color: rgb(46, 233, 8);
  }
  /deep/ .noReach{
    color: #e4393c;
  }
</style>